<template>
    <div>
        <div class="grid grid-cols-5">
            <div v-for="(item, index) in albumList.slice(pageItems * (page -1) ,pageItems * page)" :key="index">
                <n-image
                    width="150"
                    :style="{ border: '1px solid #999999'}"
                    :src="item.picUrl+ '?param=150y150'"
                />
                <p class="cursor-pointer hover:underline" :title="item.name">
                    {{ calString(item.name, 15) }}</p>
                <p class="text-gray-400">{{calData(item.publishTime)}}</p>
            </div>
        </div>
    
        <div class="flex justify-center items-center mt-2">
            <n-pagination v-model:page="page" :page-count="pageCount" show-quick-jumper/>
        </div>
    </div>
</template>

<script>
import {NImage, useNotification, NPagination} from 'naive-ui';
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {calData, calString} from "@/util/cal";
import {useRouter} from "vue-router";

export default {
    name: "AllAlbums",
    props: {
        albumList: {
            type: Array,
            default: () => []
        },
        albumSize: {
            type: Number,
            default: 0
        }
    },
    setup(props) {
        const TAG = "AllAlbums.vue";
        const router = useRouter();
        const listInfo = reactive({
            page: 1,
            pageCount: 1,
            pageItems: 15
        })
        const init = () => {
            let object =props.albumSize / listInfo.pageItems;
            if (Number.isInteger(object)) {
                listInfo.pageCount = object;
            } else {
                listInfo.pageCount = parseInt(object) + 1;
            }
        }
        onMounted(() => {
            init();
            watchEffect(() => {
                let o1 =props.albumSize;
                init();
            })
        })
        // 通知组件
        const notification = useNotification();
        // 根据ＩＤ获取专辑详情
        const getRouterToAlbumList = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/album', query: {id}});
            }
        }
        return {
            ...toRefs(listInfo),
            calData,
            calString,
            getRouterToAlbumList
        }
        
    },
    components: {
        NImage,
        NPagination
    }
}
</script>

<style scoped>

</style>